<script>
import { defineComponent } from 'vue'
export default defineComponent({
  setup() {
    return {}
  }
})
</script>
<template>
  <div class="collect">
    <div class="rcmdlist">
      <ul>
        <li>
          <div class="video_cover">
            <img src="../assets/images/swiper1.webp" />
            <div class="mask">
              <div class="mask_left"><span class="iconfont icon-yanjing"></span>584.7w</div>
              <div class="right_mask">53部作品</div>
            </div>
          </div>
          <div class="video_name one-text-cut">2022 戛纳国际创意节</div>
          <div class="video_author">
            <div class="video_auth">广告精选</div>
            <div class="video_create">创建人</div>
          </div>
        </li>
        <li>
          <div class="video_cover">
            <img src="../assets/images/swiper1.webp" />
            <div class="mask">
              <div class="mask_left"><span class="iconfont icon-yanjing"></span>584.7w</div>
              <div class="right_mask">53部作品</div>
            </div>
          </div>
          <div class="video_name one-text-cut">2022 戛纳国际创意节</div>
          <div class="video_author">
            <div class="video_auth">广告精选</div>
            <div class="video_create">创建人</div>
          </div>
        </li>
        <li>
          <div class="video_cover">
            <img src="../assets/images/swiper1.webp" />
            <div class="mask">
              <div class="mask_left"><span class="iconfont icon-yanjing"></span>584.7w</div>
              <div class="right_mask">53部作品</div>
            </div>
          </div>
          <div class="video_name one-text-cut">2022 戛纳国际创意节</div>
          <div class="video_author">
            <div class="video_auth">广告精选</div>
            <div class="video_create">创建人</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.collect {
  padding: 0 11px;
  background-color: #f6f7f7;
  height: 100%;
  .rcmdlist {
    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      li {
        margin-top: 7px;
        height: 160px;
        width: 49%;
        background-color: #fff;
        border-radius: 10px;
        overflow: hidden;
        .video_cover {
          position: relative;
          img {
            width: 100%;
            height: 98px;
          }
          .mask {
            position: absolute;
            bottom: 0px;
            color: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            width: 100%;
            line-height: 28px;
            .mask_left {
              display: flex;
              transform: scale(0.9);
              margin-left: -5px;
              span {
                font-size: 15px;
                margin-right: 5px;
                margin-left: 12px;
                &:first-child {
                  font-size: 18px;
                }
              }
            }
            .right_mask {
              margin-right: 3px;
              transform: scale(0.9);
            }
          }
        }
        .video_name {
          margin-top: 2px;
          line-height: 26px;
          color: #222222;
          font-weight: 600;
          font-size: 13px;
          padding: 0 12px;
        }

        .video_author {
          display: flex;
          padding: 0 12px;
          padding-right: 6px;
          line-height: 22px;
          transform: scale(0.9);
          margin-left: -9px;
          .video_auth {
            color: #262626;
            font-size: 12px;
            margin-right: 4px;
          }
          .video_create {
            color: #9c9c9c;
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>